import React, { useEffect, useState } from 'react'
import { useAppSelector, useAppDispatch } from '../../app/hooks'
import { ProductCard, Stepper, Checkbox, SubmitBar } from 'react-vant';
import { increaseCount, decreaseCount, switchCarCheck, allChecked } from '../../app/shopCar/shopCarSlice'
import { useCar } from '../../hooks';
import { useNavigate } from 'react-router';


const ShopCar: React.FC = () => {
  const navigate = useNavigate()
  const shopCarList = useAppSelector(state => state.shopcarReducer.ShopCarList)
  const {totalCheckedPrice,isAllChecked} = useCar()

  const dispatch = useAppDispatch()

  return (
    <div >
      {
        shopCarList.length > 0? 
        shopCarList.map(item => {
          return (
            <div key={item.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100vw' }}>
              <Checkbox checked={item.checked} onChange={() => dispatch(switchCarCheck(item.id))}>
              </Checkbox>
              <ProductCard
                price={item.price}
                desc={item.descript}
                title={item.title}
                thumb={item.image[0]}
                num={
                  <Stepper
                    value={item.count}
                    onMinus={() => dispatch(decreaseCount(item.id))}
                    onPlus={() => dispatch(increaseCount(item.id))}
                  />
                }
              />
            </div>
          )
        })
        :
        <div>购物车空空如也！</div>
      }
      <div className="demo-submit-bar">
        <SubmitBar
          price={totalCheckedPrice * 100}
          buttonText="提交订单"
          onSubmit= {() => navigate('/order')}
        >
          <Checkbox checked={isAllChecked} onChange={(checked) => dispatch(allChecked(checked))}>全选</Checkbox>
        </SubmitBar>
      </div>
    </div>
  )
}

export default ShopCar